import React, { useState, useRef, useEffect } from 'react';
import { Carousel, Radio } from 'antd';
import './zmd.scss'
import index from "../store/index";
import ZmdIndex from "./zmdbox/zmd-index";
import ZmdTwo from "./zmdbox/zmd-two";
import ZmdThree from "./zmdbox/zmd-three";


index.subscribe(() => {
    console.log(index.getState(), 'zmd')
})

const App = () => {

    const carouselRef = useRef(null);
    const [currentSlide, setCurrentSlide] = useState(0);
    // 第三张状态
    const [zt, setZt] = useState(false);
    const zmd = index.getState().age
    const handleSlideChange = (index) => {
        console.log('触发轮播图切换', index);
        setCurrentSlide(index);
        if (index == 2) {
            setZt(true)
        } else {
            setZt(false)
        }
    };


    const CustomIndicator = ({ total, currentIndex }) => {
        const indicators = [];
        for (let i = 0; i < total; i++) {
            const isActive = i === currentIndex;
            indicators.push(
                <div key={i} className={`indicator ${isActive ? 'active' : ''}`} onClick={() => carouselRef.current.goTo(i)}></div>
            );
        }

        return <div className="custom-indicators">{indicators}</div>;
    };




    useEffect(() => {
        const carouselContainer = document.querySelector('.lbt-Box');
        let itme = null
        const handleScroll = (event) => {
            const deltaY = event.deltaY;
            if (itme) {
                clearTimeout(itme)
            }
            itme = setTimeout(() => {
                if (deltaY > 0) {
                    carouselRef.current.next();
                } else if (deltaY < 0) {
                    carouselRef.current.prev();
                }
            }, 300)
        };

        carouselContainer.addEventListener('wheel', handleScroll);

        return () => {
            carouselContainer.removeEventListener('wheel', handleScroll);
        };
    }, []);

    return (
        <>
            <div className='lbt-Box'>
                <Carousel dotPosition={'right'} ref={carouselRef} infinite={false} dots={false} afterChange={handleSlideChange} >
                    <div className='box-item-vh'>
                        <div>
                            <ZmdIndex />
                        </div>
                    </div>
                    <div className='box-item-vh'>
                        <div>
                            <ZmdTwo />
                        </div>
                    </div>
                    <div className='box-item-vh'>
                        <div>
                            <ZmdThree zt={zt} />
                        </div>
                    </div>
                    <div className='box-item-vh'>
                        <div>{zmd}</div>
                    </div>
                </Carousel>
                <CustomIndicator total={4} currentIndex={currentSlide} />
            </div>
        </>
    );
};
export default App;
